<template>
  <div class="container">
    <scroller :on-refresh="refresh" :on-infinite="infinite" ref="main_scroll"> 
      <div class="zhouqi" id="zhouqi">
        <h2 class="zhouqi-title animated fadeInLeft">
          生命周期表
        </h2>
        <span class="zhouqi-title-line animated fadeInLeft"></span>
        <div class="zhouqi-main">
          <div class="zhouqi-main-left">
            <ul>
              <li v-for="(item,index) in leftLists" :key="index" class="flex-box">
                <div class="list-container loading-bg">
                  <img :src="require('../assets/img/' + item.img)" alt="">
                  <div class="list-name">
                    <h4>{{item.name}}</h4>
                    <p>{{item.created_time}}</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="zhouqi-main-right">
            <ul>
              <li v-for="(item,index) in rightLists" :key="index" class="flex-box">
                <div class="list-container">
                  <img :src="require('../assets/img/' + item.img)" alt="">
                  <div class="list-name">
                    <h4>{{item.name}}</h4>
                    <p>{{item.created_time}}</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
// @ is an alias to /src
export default {
  name: 'home',
  data() {
    return {
      dataLists: '',
      navIndex: 0,
      leftLists: '',
      rightLists: '',
      listStart: 1
    }
  },
  components: {},
  computed: {},
  methods: {
    refresh() {
      console.log('refresh')
      this.timeout = setTimeout(() => {
        this.$refs.main_scroll.finishPullToRefresh()
      }, 1500)
    },
    infinite() {
      this.timeout = setTimeout(() => {
        this.listStart++
        this.leftLists = this.dataLists
          .filter((item, index) => index % 2 === 0)
          .slice(0, this.listStart * this.listStart)
        this.rightLists = this.dataLists
          .filter((item, index) => index % 2 != 0)
          .slice(0, this.listStart * this.listStart)
        this.$refs.main_scroll.finishInfinite(true)
      }, 1000)
    }
  },
  created() {},
  mounted() {
    this.$axios
      .get('data/lifehistory-data/data.json')
      .then(data => {
        this.dataLists = data.data.result.RL
        console.log(this.dataLists)
        // this.leftLists = data.data.result.RL.filter((item, index) => index % 2 === 0)
        // this.rightLists = data.data.result.RL.filter((item, index) => index % 2 != 0)
      })
      .catch(error => {
        console.log(error)
      })
    let testArr = [1, 2, 2, 3, 4, 5, 6]
    console.log(testArr.filter((item, index) => index > 0))
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  padding-bottom: r(49);
  box-sizing: border-box;
  .zhouqi {
    width: 100%;
    overflow: hidden;
    background: url('../assets/img/Top-part@3x.png') top no-repeat;
    background-size: 100%;
    .zhouqi-title {
      font-family: 'FZZZHONGJW';
      width: 100%;
      float: right;
      font-size: r(28);
      line-height: r(48);
      margin-right: r(24);
      text-align: right;
      padding-top: r(42);
      position: relative;
      color: #fff;
      animation-delay: 0.5s;
    }
    .zhouqi-title-line {
      width: r(80);
      height: 2px;
      background: #fff;
      float: right;
      margin-right: r(24);
      animation-delay: 0.85s;
    }
    .zhouqi-main {
      width: 100%;
      float: left;
      padding-left: r(14);
      padding-right: r(14);
      padding-top: 20px;
      box-sizing: border-box;
      overflow: hidden;
      background: none;
      .zhouqi-main-left,
      .zhouqi-main-right {
        width: 50%;
        float: left;
        ul {
          width: 100%;
          display: block;
          li {
            width: 100%;
            float: left;
            padding-top: r(17);
            padding-bottom: r(17);
            .list-container {
              width: r(142);
              height: r(142);
              border-radius: 100%;
              border-width: r(8);
              box-shadow: 0 4px 12px rgba($color: #000000, $alpha: 0.1);
              overflow: hidden;
              position: relative;
              img {
                width: 100%;
                height: 100%;
                border-radius: 100%;
                box-sizing: border-box;
                border: 8px solid #fff;
              }
              .list-name {
                width: r(142);
                height: r(142);
                position: absolute;
                border-radius: 100%;
                background: #fff;
                top: r(75);
                text-align: center;
                h4 {
                  font-size: r(16);
                  color: #2f3338;
                  line-height: r(28);
                  margin: 0;
                  margin-top: r(10);
                }
                p {
                  font-size: r(10);
                  color: #2f3338;
                  line-height: r(12);
                  color: #999;
                }
              }
            }
          }
        }
      }
      .zhouqi-main-right {
        padding-top: r(40);
      }
    }
  }
}
</style>
